<template>
  <view class="page">
    <Header
      :titleFlag="false"
      :userInfoFlag="true"
      :tipsFlag="true"
      :printFlag="true"
      :printData="printData"
    ></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <view class="tabs_list">
              <view
                class="tabs_item"
                v-for="(item, index) in chapterList"
                :key="index"
                :class="{
                  active: index === currentChapterIndex,
                }"
                @click="handleChangeChapter(index)"
              >
                <text>{{ item.shortName }}</text>
              </view>
            </view>
          </view>
          <view class="box">
            <view class="list">
              <view class="item" v-for="(item, index) in wordList" :key="index">
                <view class="item_left">
                  <view class="item_word"> {{ item.word }} </view>
                  <view class="item_phonetic">
                    /
                    <text v-for="(ele, i) in item.segList" :key="i">
                      {{ ele.ipaUs }}
                    </text>
                    /
                  </view>
                </view>
                <view class="item_right">
                  <view class="item_interpretation">
                    {{ item.wordParaphrase }}
                  </view>
                  <view class="item_icon">
                    <view class="icon" @click="handleChangeState('1', item)">
                      <image
                        v-if="item.testFlag"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/icon_dui_active.png"
                        mode="scaleToFill"
                      />
                      <image
                        v-else
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/icon_dui.png"
                        mode="scaleToFill"
                      />
                    </view>
                    <view class="icon" @click="handleChangeState('2', item)">
                      <image
                        v-if="!item.testFlag"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/icon_cuo_active.png"
                        mode="scaleToFill"
                        @click="handleChangeState"
                      />
                      <image
                        v-else
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/icon_cuo.png"
                        mode="scaleToFill"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="btn">
            <view
              class="btn_content"
              @click="confirm()"
            >
              <text>确定</text>
            </view>
            <view class="btn_content" @click="back()">
              <text>取消</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-popup
      class="custom-popup"
      v-model="tipsShow"
      :zoom="false"
      mode="center"
      width="800rpx"
      height="690rpx"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="tips">
        <view class="tips_content">
          <view class="tips_text tips_text1">
            <view>认识的单词打</view>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/icon_dui_active.png"
              mode="scaleToFill"
            />
          </view>
          <view class="tips_text tips_text1">
            <view>不认识的单词打</view>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/icon_cuo_active.png"
              mode="scaleToFill"
            />
          </view>
          <view class="tips_text tips_text2">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/icon_dui_active.png"
              mode="scaleToFill"
            />
            <view>单词直接进入测试</view>
          </view>
          <view class="tips_text tips_text2">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/icon_cuo_active.png"
              mode="scaleToFill"
            />
            <view>单词进行练习</view>
          </view>
        </view>
        <view class="tips_btn" @click="tipsShow = false">
          <text>关闭</text>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="custom-popup"
      v-model="selectShow"
      :zoom="false"
      mode="center"
      width="1000rpx"
      height="690rpx"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="select">
        <view class="select_content">
          <view
            class="select_nav"
            @click="
              handleSelectPage(testWordIds.length, '/pages/word/wordTest')
            "
          >
            <text>单词测试</text>
          </view>
          <view class="select_text">单词数：{{ testWordIds.length }}</view>
        </view>
        <view class="select_content">
          <view
            class="select_nav"
            @click="
              handleSelectPage(
                leaningWordIds.length,
                '/pages/word/wordPractice'
              )
            "
          >
            <text>单词练习</text>
          </view>
          <view class="select_text">单词数：{{ leaningWordIds.length }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getChapters,
  getWords,
  saveChooseWord,
  getChapterLockFlag,
} from "@/api/sync";
export default {
  components: {},
  data() {
    return {
      bookId: "",
      chapterList: [],
      chapterLockFlag: false,
      currentChapterIndex: 0,
      wordList: [],
      testWordIds: [],
      leaningWordIds: [],
      tipsShow: true,
      selectShow: false,
      printData: [],
    };
  },
  onLoad(options) {
    this.bookId = options.bookId;
    this.getData();
  },
  methods: {
    getData() {
      getChapters(this.bookId).then((res) => {
        this.chapterList = res.data;
        this.getWord();
      });
    },
    handleChangeChapter(index) {
      if (index === this.currentChapterIndex) return;
      this.currentChapterIndex = index;
      this.getWord();
    },
    getWord() {
      getWords(
        "all",
        this.chapterList[this.currentChapterIndex].chapterId
      ).then((res) => {
        this.wordList = res.data;
        this.printData = this.wordList.map((item) => {
          return {
            word: item.word,
            wordParaphrase: item.wordParaphrase,
          };
        });
        if (this.wordList.length > 0) {
          let list = this.wordList.map((item) => {
            return {
              word: item.word,
              wordParaphrase: item.wordParaphrase,
            };
          });
          list.unshift({
            word: "单词",
            wordParaphrase: "释义",
          });
          this.printData = list;
        }
      });
      getChapterLockFlag(
        this.chapterList[this.currentChapterIndex].chapterId
      ).then((res) => {
        this.chapterLockFlag = res.data;
      });
    },
    handleSelectPage(num, url) {
      if (num === 0) return;
      let params = {
        chapterId: this.chapterList[this.currentChapterIndex].chapterId,
        testWordIds: this.testWordIds,
        leaningWordIds: this.leaningWordIds,
      };
      saveChooseWord(params).then(() => {
        this.switchPage(
          `${url}?type=dclx&bookId=${this.bookId}&chapterId=${params.chapterId}`
        );
      });
    },
    handleChangeState(type, item) {
      let flag = item.testFlag;
      if (type === "1") {
        if (flag === true) return;
        this.$set(item, "testFlag", true);
      } else if (type === "2") {
        if (flag === false) return;
        this.$set(item, "testFlag", false);
      }
    },
    switchPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    confirm() {
      // if (this.chapterLockFlag) return;
      let testWordIds = [];
      let leaningWordIds = [];
      this.wordList.forEach((item) => {
        if (item.testFlag) {
          testWordIds.push(item.id);
        } else {
          leaningWordIds.push(item.id);
        }
      });
      this.testWordIds = testWordIds;
      this.leaningWordIds = leaningWordIds;
      this.selectShow = true;
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./wordSelect";
</style>
